<template>
  <!-- 内容区域 -->
  <div class="deviceGroupDetail details_box">
    <div class="btns add_btn_top">
      <el-button
        type="primary"
        icon="el-icon-edit-outline"
        size="mini"
        @click="openEdit"
        >编辑</el-button
      >
      <el-button icon="el-icon-delete" size="mini" @click="deleteBtn"
        >删除</el-button
      >
      <el-button icon="el-icon-close" size="mini" @click="closePage"
        >关闭</el-button
      >
      <edit-device-group
        :editdGroupShow="editdGroupShow"
        :deviceGroupToken="deviceGroupToken"
        @changeShow="changeShow"
      />
    </div>
    <Details
      :nameObj="{
        label: '设备组名称',
      }"
      :detail="deviceGroup"
      :qrCode="qrCode"
    ></Details>
    <el-card shadow="never" class="detailElement">
      <div class="">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组元素" name="first" class="tabPaneHeight">
            <!-- class="content_details_height" -->
            <device-group-detail-tab
              :deviceGroupToken="deviceGroupToken"
              ref="deviceGroupElement"
              @resultDataNum="resultDataNum"
            ></device-group-detail-tab>
          </el-tab-pane>
        </el-tabs>
      </div>
      <Pagination
        @pagination="onPageChange"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
      <div class="buttonStyle">
        <el-button
          size="mini"
          icon="el-icon-plus"
          class="addCommand"
          @click="openEleAdd"
          >添加组元素</el-button
        >
      </div>
      <add-device-group-element
        :showDeviceGroupEleAdd="showElementAdd"
        :deviceGroupToken="deviceGroupToken"
        @closeEleDialog="closeEleDialog"
      />
    </el-card>
  </div>
</template>

<script>
import textCopy from "../../common/textCopy.js";
import { closeTab } from "../../common/js/tab-comm.js";
import { formatTime } from "@/views/common/js/utils.js";
import "../../../assets/style/deviceCss/commonStyle.css";
import DeviceGroupDetailTab from "./deviceGroupDetailTab";
import EditDeviceGroup from "./editDeviceGroup";
import AddDeviceGroupElement from "./elements/addDeviceGroupElement";
import Pagination from "@/views/common/page";
import Details from "@/components/Details";
import { getDeviceGroupDetails, delDeviceGroup } from "@/api/deviceGroup";
export default {
  components: {
    DeviceGroupDetailTab,
    EditDeviceGroup,
    AddDeviceGroupElement,
    Details,
    Pagination,
  },
  data() {
    return {
      qrCodeShow: false,
      editdGroupShow: false,
      qrCode: "",
      activeName: "first",
      deviceGroupToken: this.$route.query.deviceGroupToken,
      deviceGroup: {},
      elementDatas: [],
      showElementAdd: false,
      total: 0,
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
    };
  },
  mounted() {
    this.getDeviceGroupByToken();
  },
  methods: {
    formatDateT(date) {
      return formatTime(date);
    },
    // 复制
    Copytext() {
      textCopy.copy();
    },
    mouseOver() {
      this.qrCodeShow = true;
    },
    mouseLeave() {
      this.qrCodeShow = false;
    },
    // 关闭页面
    closePage() {
      closeTab(this.$route.fullPath, "deviceGroupsList");
    },
    // 打开编辑弹窗
    openEdit() {
      this.editdGroupShow = true;
    },
    // 弹窗回调
    changeShow(data) {
      this.editdGroupShow = false;
      if (data.isRefresh) {
        this.deviceGroupToken = data.deviceGroupToken;
        this.$router.push({
          path: "deviceGroupDetail",
          query: { deviceGroupToken: data.deviceGroupToken },
        });
        this.getDeviceGroupByToken();
      }
    },
    // 获取设备组详情
    getDeviceGroupByToken() {
      var that = this;
      getDeviceGroupDetails(this.deviceGroupToken).then((res) => {
        this.deviceGroup = res.data;
      });
    },
    //删除
    deleteBtn() {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delDeviceGroup(this.deviceGroupToken).then((res) => {
          this.$msg({
            type: "success",
            message: "删除成功!",
          });
          this.closePage();
        });
      });
    },
    //分页回调
    onPageChange({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.$refs.deviceGroupElement.pageNum = this.pageNum;
      this.$refs.deviceGroupElement.pageSize = this.pageSize;
      this.$refs.deviceGroupElement.getDeviceGroupElement();
    },
    openEleAdd() {
      this.showElementAdd = true;
    },
    closeEleDialog(isRefresh) {
      this.showElementAdd = false;
      if (isRefresh) {
        this.$refs.deviceGroupElement.pageNum = this.pageNum;
        this.$refs.deviceGroupElement.pageSize = this.pageSize;
        this.$refs.deviceGroupElement.getDeviceGroupElement();
      }
    },
    resultDataNum(valueFromChild) {
      console.log("From the child:", valueFromChild);
      this.total = valueFromChild;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.details_box {
  position: relative;
  /deep/ .el-tabs__nav-wrap {
    padding-left: 20px;
  }
  .btns {
    position: absolute;
    right: 0;
    top: -40px;
    z-index: 22;
  }
}
.detailTop {
  display: flex;
  justify-content: space-between;
  height: 260px;
  .top-button {
    position: absolute;
    right: 0;
    top: -38px;
  }
  .deviceGroupDetailsImg {
    position: absolute;
    width: 206px;
    height: 206px;
    margin: 24px 0 0 24px;
    transition: all 0.6s;
  }

  .deviceGroupDetailsImg:hover {
    transform: scale(1.1);
  }
  .qrCodeImg {
    width: 140px;
    height: 140px;
    margin: 10px 94px 80px 62px;
  }
  .qrCode-details {
    text-align: center;
    margin-top: -72px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
  }

  .deviceGroupsToken {
    .labelName {
      color: #333333;
    }
    position: absolute;
    left: 283px;
    top: 66px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    width: 400px;
    display: block;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .deviceGroupName {
    .labelName {
      color: #333333;
    }
    position: absolute;
    left: 283px;
    top: 103px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    width: 400px;
    display: block;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .deviceGroupCreatedate {
    .labelName {
      color: #333333;
    }
    position: absolute;
    left: 750px;
    top: 66px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  .deviceGroupUpdatedate {
    .labelName {
      color: #333333;
    }
    position: absolute;
    left: 750px;
    top: 103px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  .view-details {
    position: absolute;
    left: 750px;
    top: 134px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .code-img {
    width: 29px;
    height: 29px;
    position: absolute;
    left: 815px;
    top: 138px;
  }
}
.detailElement {
  display: flex;
  justify-content: space-between;
  width: 100%;
  bottom: 0px;
  margin-top: 10px;
  position: relative;
  background-color: #fff;
}

/deep/ .el-button--primary {
  background-color: #2680d2;
  border-color: #2680d2;
}

.buttonStyle {
  position: absolute;
  right: 13px;
  top: 0;
  height: 39px;
  display: flex;
  align-items: center;
}

.buttonStyle .el-button {
  background: #2680d2;
  color: #fff;
  height: 28px;
}
.explain-text {
  width: 366px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: -19px;
  margin-left: 40px;
  width: 336px;
  height: 63px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 22px;
  word-break: break-all;
}

.box {
  position: absolute;
  top: 175px;
  left: 810px;
  display: inline-block;
  margin: 0;
  width: 264px;
  height: 182px;
  padding: 0;
  -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #bbb;
  z-index: 9999;
}
.box[data-box-arrow]:before,
.box[data-box-arrow]:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  border-color: transparent;
}
.box[data-box-arrow="top"]:before,
.box[data-box-arrow="top"]:after {
  bottom: 100%;
  left: 10px;
}
.box[data-box-arrow="top"]:before {
  border-bottom-color: #bbb;
}
.box[data-box-arrow="top"]:after {
  border-bottom-color: #fff;
  margin-bottom: -1px;
}
/deep/.el-card__body {
  width: 100%;
}
/deep/.el-tabs__item.is-active {
  color: #2680d2;
}
/deep/.el-tabs__active-bar {
  background-color: #2680d2;
}
</style>
